<template>
	<view>
		<canvas canvas-id="AfUFRWZHCDiIVLWgHfqFZJYnKiipWwhD" id="AfUFRWZHCDiIVLWgHfqFZJYnKiipWwhD" class="charts"
			@touchend="tap" />
	</view>
</template>

<script>
	import uCharts from '@qiun/ucharts';
	var uChartsInstance = {};
	export default {
				props: {
					list: {
						type: Array,
						default: []
					}
				},
		data() {
			return {
				cWidth: 750,
				cHeight: 500
			};
		},
		onReady() {
			//这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(654);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(350);
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["周一", "周二", "周三", "周四", "周五", "周六","周日"],
						series: this.list
					};
					this.drawCharts('AfUFRWZHCDiIVLWgHfqFZJYnKiipWwhD', res);
				}, 500);
			},
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "area",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					animation: true,
					fontSize: 12,
					fontColor: '#4E5969',
					color: ["#EB0000", "#FDE170", "#94D2FF"],
					padding: [15, 0, 0, 0],
					enableScroll: false,
					// dataLabel: false,
					// background: "#FFFFFF",
					legend: { // 底部正方形说明
						show: false
					},
					xAxis: {
						gridColor: '#EDEDED', // 竖轴颜色
						disableGrid: false, // 数轴是否显示 false显示
						// axisLineColor: 'red', // 横轴颜色
					},
					yAxis: {
						gridColor: '#EDEDED', // 竖轴颜色
						// dashLength: 4, // 纵向网格为虚线时，单段虚线长度
						gridType: "dash", // 虚线
						disabled: true,
						disableGrid: false,
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				});
			},
			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			}
		}
	};
</script>

<style scoped>
	.charts {
		width: 654rpx;
		height: 350rpx;
	}
</style>